<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="../../frame/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../frame/static/css/style.css">
    <link rel="icon" href="../../frame/static/image/code.png">
</head>

<body class="body">
    <!--查询条件:工具条-->
    <form class="layui-form" action="" target="nm_iframe">
        <blockquote class="layui-elem-quote">
            <div class="layui-form-item">
                <span class="layui-form-label" style="width: auto;">订单号：</span>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" id="orderNo" autocomplete="off" placeholder=" 请输入菜单名称" class="layui-input" />
                </div>
                <span class="layui-form-label" style="width: auto;">下单时间：</span>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="startDateQuery" id="startDateQuery" lay-verify="date" autocomplete="off" placeholder="起始时间"
                        class="layui-input" />
                </div>
                <span class="layui-form-label" style="width: auto;">至</span>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="endDateQuery" id="endDateQuery" lay-verify="date" autocomplete="off" placeholder="结束时间" class="layui-input"
                    />
                </div>
                <button type="button" data-method="queryHandler" class="layui-btn" id="query">查询</button>
                <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
            <div class="layui-form-item">
                <span class="layui-form-label">支付类型：</span>
                <div class="layui-input-block">
                    <input type="checkbox" name="allPayType" lay-skin="primary" title="全部" checked="">
                    <input type="checkbox" name="payOnLine" lay-skin="primary" title="在线付款">
                    <input type="checkbox" name="cod" lay-skin="primary" title="货到付款">
                </div>
            </div>
			<div class="layui-form-item">
				<span class="layui-form-label">订单状态：</span>
				<div class="layui-input-block">
					<input type="checkbox" name="allOrderStatus" lay-skin="primary" title="全部" checked="">
					<input type="checkbox" name="normalOrder" lay-skin="primary" title="有效订单">
					<input type="checkbox" name="unReceivedOrder" lay-skin="primary" title="待接单">
					<input type="checkbox" name="unDelivered" lay-skin="primary" title="待配送">
					<input type="checkbox" name="delivering" lay-skin="primary" title="配送中">
					<input type="checkbox" name="delivered" lay-skin="primary" title="已送达">
					<input type="checkbox" name="confirmed" lay-skin="primary" title="已确认">
					<input type="checkbox" name="invalidOrder" lay-skin="primary" title="无效订单">
				</div>
			</div>
        </blockquote>
    </form>
    <!--表格-->
    <table class="layui-hide" id="orderList"></table>

    <div id="withdrawContainer" style="display:none">
        <table id="withdrawTable" lay-filter="withdraw"></table>
    </div>

		<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../frame/layui/layui.js"></script>
    <script type="text/javascript" src="../../js/index.js"></script>
    <!--引入树插件-->
    <script type="text/javascript">
        //表单的checkbox渲染等
		layui.use('form', function () {
            var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
            form.render();
        });
		//日期控件渲染
		layui.use('laydate', function () {
				var laydate = layui.laydate;
				laydate.render({
						elem: '#startDateQuery'
				});
				laydate.render({
						elem: '#endDateQuery'
				});
		})
		showOrderList();
		//2.获取数据
		function showOrderList(){
			layui.use('table', function(){
				var table = layui.table;
					table.render({
						elem: '#orderList',
						url: orderFrontPath+"/order/getOrderList",
						response: {
							statusName: 'code', //数据状态的字段名称，默认：code
							statusCode: 200, //成功的状态码，默认：0
							msgName: 'msg', //状态信息的字段名称，默认：msg
							countName: 'total', //数据总数的字段名称，默认：count
							dataName: 'data' //数据列表的字段名称，默认：data
						},
						where:{
							title:$("#orderNo").val()
						},
						cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
						cols: [[
							{type:'checkbox', fixed: 'left'},
							{field:'orderNo', width:200, title: '订单号',align: 'center', sort: true},
							{field:'title', width:120, title: '商品名称',align: 'center', sort: true},
							{field:'totalPrice', width:120, title: '单价',align: 'center'},
							{field:'totalItem', width:120, title: '数量',align: 'center', sort: true},
							{field:'deliveryFee', width:120, title: '配送费',align: 'center'},
							{field:'address', width: 200,title: '配送地址', align: 'center', minWidth: 100}, //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
							{field:'shopTitle',width: 150, title: '供应商名称',align: 'center', sort: true},
							{field:'totalPaid',width: 120, title: '实收款',align: 'center', sort: true},
							{field:'createTime',width: 250, title: '创建时间',align: 'center', sort: true},
							{field:'classify', align: 'center',title: '订单状态'}
						]],
						page: true,
						limits: [30, 60, 90, 150, 300],
						loading: false
					});
			});
		}
		//查询按钮事件
		$('#query').click(function (e) {
			showOrderList();
		});
    </script>
	<script type="text/html" id="barOption">
	    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="printOrder">打印订单</a>
	    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="cancelOrder">取消订单并退款</a>
	    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="receiveOrder">接单</a>
	</script>
</body>

</html>
